<template>
    <div class="curriculum">
        <dl class="yskc">
            <dt @click="index = 1" style="background: url(/img/雅思课程.jpg)">
                <h3>雅思课程</h3>
                <a href="">查看更多课程</a>
            </dt>
            <dd :style="{display:index===1?'block':'none'}">
                <div class="yskc-focu">
                    <div class="yskc-focu-con">
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                    </div>
                    <i class="yskc-focu-con-left"></i>
                    <i class="yskc-focu-con-right"></i>
                </div>
            </dd>
        </dl>
        <dl class="yskc">
            <dt @click="index = 2" style="background: url(/img/托福课程.jpg)">
                <h3>雅思课程</h3>
                <a href="">查看更多课程</a>
            </dt>
            <dd :style="{display:index===2?'block':'none'}">
                <div class="yskc-focu">
                    <div class="yskc-focu-con">
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                    </div>
                    <i class="yskc-focu-con-left"></i>
                    <i class="yskc-focu-con-right"></i>
                </div>
            </dd>
        </dl>
        <dl class="yskc">
            <dt @click="index = 3" style="background: url(/img/小托福课程.jpg)">
                <h3>雅思课程</h3>
                <a href="">查看更多课程</a>
            </dt>
            <dd :style="{display:index===3?'block':'none'}">
                <div class="yskc-focu">
                    <div class="yskc-focu-con">
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                        <div>
                            <p>
                                <span>雅思单项班</span>
                                <font>深入剖析<br>针对式分析</font>
                            </p>
                            <a href="">免费试听</a>
                        </div>
                    </div>
                    <i class="yskc-focu-con-left"></i>
                    <i class="yskc-focu-con-right"></i>
                </div>
            </dd>
        </dl>
    </div>
</template>

<script>
    export default {
        name: "collapse",
        data() {
            return {
                index:1
            };
        }
    }
</script>

<style scoped>

</style>